@charset "utf-8";

body  {
	font: 100% Arial, Verdana, Helvetica, sans-serif;
	background: /*#3366CC;*/ SteelBlue;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

#container{
	margin: 0 10% 0 10%;
}

#header{
	margin: auto;
	width: 100%;
	background-color: LightSteelBlue;
	overflow: auto;	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	background-image: url(../images/teste.png);
	background-repeat:no-repeat;
	background-size:100% 100%, auto auto;
	height: 100px;
}

#menu{
	width: 14%;
	float: left;
	font-size: 13px;
	background-color: #DDDDDD;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	padding: 0.5%;
	word-wrap: break-word;
}

#conteudo{
	width: 79%;
	float: right;
	background-color: #E0EAEA;
	border-radius: 0px 10px 10px 0px;
	-moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
	padding: 0.5% 2% 0.5% 0%;
}

#footer{
	margin: auto;
	width: 100%;
	clear:both;
	background-color: #DDDDDD;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	overflow: auto;
	background-color: /*#DDDDDD*/ LightSteelBlue;
}

h1{
	color: OliveDrab;   
}

#corpo{
	display: block;
	height: auto;
	overflow: auto;
	background-color: #E0EAEA;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	margin: 5px auto 5px auto;
	text-align: left;
}

li{
	list-style: none;
}

li a{
	text-decoration: none;
	color: DarkBlue;
}

li a:hover{
	text-decoration: underline;
	color: DarkBlue;
}

li#pagina_atual{
	list-style: disc;
}

#navegacao{
	color: Black;	
	border-bottom: 2px solid SteelBlue;
	text-decoration: none;
	font-weight: normal;
	padding: 2px;
	width: auto;
}

#navegacao a{
	text-decoration: none;
	color: DarkBlue;
	
}

#navegacao a:hover{
	text-decoration: underline;
}

label{
	display: inline;
    padding: 3px;	
}

input{
	display: inline;
    padding: 5px;	
}

input:focus{
	display: inline;
    padding: 5px;
	border-color: DarkOliveGreen;
    border-width: 2px;
}

input[type=text]{
	width: 250px;
	font-size: small;
}

input[type=button]{
	color: black;
	background-color: OliveDrab;
	font-size: small;
	padding: 3px 15px;
}

select{
	font-size: 14px;
    padding: 3px;
    vertical-align: middle;
}

fieldset{
	border: 2px groove Green;
    border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border=radius: 10px;
    padding: 20px;
}

legend{
	padding: 0px 15px;
}

textarea{
	padding: 5px;
}

textarea:focus{
	border-color: DarkOliveGreen;
	border-width: 2px;
}

.exemplos{
	overflow:auto;
}

/* Inicio - Exemplo GRADIENTE */
#gradient, #gradientIE, #gradientFX, #gradientWK{
	width: 100px;
	height: 100px;
	float: left;
	background: #999;
	margin-right: 2px;
}

#gradient{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit browsers */
	background: -moz-linear-gradient(top,  #ccc,  #000); /* Firefox 3.6+ */
}

#gradientIE{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}

#gradientFX{
	background: -moz-linear-gradient(top,  #ccc,  #000);
}

#gradientWK{
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
}
/* Fim - Exemplo GRADIENTE */

/* Inicio - Exemplo COLUNA TRANSPARENTE*/
#imgback{
	width:540px;
	height:270px;
	position: relative;
	background-image: url("../img/cross-browser-compatibility.jpg");
}

.colunas{
	width: 100px;
	height: 200px;
	position:relative;
	float: left;
	margin: 20px 0px 0px 20px;
	background-color: #68838B;
	color: white;
}

#colunaIE{
	filter: alpha(opacity=65);
}

#colunaFX{
	opacity:0.65;
}

#colunaWK{
	opacity:0.65;
}

#colunaCB{
	filter: alpha(opacity=65);
	-moz-opacity:0.65;
	opacity:0.65;
}
/* Fim - Exemplo COLUNA TRANSPARENTE*/

/* Inicio - Exemplo BORDA Arredondada*/
.bordas{
	width: 200px;
	height: 50px;
	position:relative;
	float: left;
	margin: 20px 0px 0px 20px;
	background-color: #8FBC8F;
	color: white;
}

#bordaIE{
	border-radius: 10px 10px 10px 10px;
}

#bordaFX{
	-moz-border-radius: 10px 10px 10px 10px;
}

#bordaWK{
	-webkit-border-radius: 10px 10px 10px 10px;
}

#bordaCB{
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
/* Fim - Exemplo BORDA Arredondada*/

img{
	height: 20px;
	width: 20px;
	padding:0px 8px;
	vertical-align:middle;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
	border: 1px solid #B0E0E6;
}

img.img-linha{
	border-width: 0px;
	border-style:none;
}

.img-inicio{
	width: 80px;
	height: 80px;
}

.lista-browser{
	display: inline;
}

.lista-browser li{
	display: inline;
	margin: 0px 10px;
}

.lista-browser a{
	text-decoration:underline;
}

.lista-browser span{
	margin: 0px 0px 0px 10px;
}


#imgFX-x-IE{
	height: 150px;
	width: 250px;
}

#carrinho{
	height:80px;
	width: 80px;
}

#imgCB{
	height: 250px;
	width: 200px; 
}

.centralizar{
	text-align: center;
}

#relogio{
	text-align:right;
	margin: 20px 20px 10px 0px;
}